Animation হলো একটি প্রক্রিয়া যার মাধ্যমে একটি অবজেক্টের বৈশিষ্ট্য (যেমন পজিশন, স্কেল, রোটেশন) সময়ের সাথে পরিবর্তিত হয়, যাতে একটি গতিশীল এবং প্রাণবন্ত দৃশ্য তৈরি হয়। BabylonJS তে, এনিমেশন একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা 3D অবজেক্টগুলির গতিবিধি এবং বাস্তবসম্মত অভিজ্ঞতা সৃষ্টি করতে ব্যবহৃত হয়। এই টিউটোরিয়ালে, আমরা Animation কি এবং BabylonJS এ এনিমেশন তৈরির পদ্ধতি সম্পর্কে বিস্তারিত জানব।
Animation কি?
Animation হলো একটি গতি বা পরিবর্তনের প্রক্রিয়া যা একটি নির্দিষ্ট সময়ের মধ্যে একটি অবজেক্টের অবস্থা বা বৈশিষ্ট্য পরিবর্তিত হয়। উদাহরণস্বরূপ:
- একটি 3D বক্সের ঘূর্ণন (rotation)।
- একটি বস্তুর স্কেল পরিবর্তন (size scaling)।
- একটি বস্তুর পজিশন পরিবর্তন (movement)।
এনিমেশন প্রক্রিয়াটি সাধারণত দুটি অংশে বিভক্ত:
- Keyframes: এনিমেশনের নির্দিষ্ট সময়ের পয়েন্ট যেখানে একটি বৈশিষ্ট্য (যেমন পজিশন, রোটেশন) পরিবর্তিত হয়।
- Tweening: keyframes এর মধ্যে পয়েন্টগুলোর মধ্যে গতি সৃষ্টির প্রক্রিয়া, যা স্লো এবং স্মুথ ট্রানজিশন তৈরি করে।
BabylonJS এ Animation তৈরির পদ্ধতি
BabylonJS এ এনিমেশন তৈরি করতে সাধারণত Animation ক্লাস ব্যবহৃত হয়। এটি বিভিন্ন ধরনের অবজেক্টের বৈশিষ্ট্য এনিমেট করতে সাহায্য করে। আসুন দেখি, কিভাবে আমরা একটি বেসিক এনিমেশন তৈরি করতে পারি।
১. BabylonJS তে Animation ক্লাস
BabylonJS এ Animation ক্লাসটি বিভিন্ন উপাদান (যেমন পজিশন, রোটেশন, স্কেল) এনিমেট করতে ব্যবহৃত হয়। এনিমেশন তৈরির জন্য আপনাকে প্রথমে একটি Animation অবজেক্ট তৈরি করতে হবে এবং তারপর তার frame rate, duration, property ইত্যাদি কনফিগার করতে হবে।
২. একটি সহজ এনিমেশন তৈরি করা
ধরা যাক, আমরা একটি বক্স তৈরি করেছি এবং আমরা তার পজিশন এনিমেট করতে চাই।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BabylonJS Animation Example</title>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
</head>
<body>
<canvas id="renderCanvas" style="width: 100%; height: 100%"></canvas>
<script>
// canvas এলিমেন্টটি পেতে
var canvas = document.getElementById("renderCanvas");
// BabylonJS এর ইঞ্জিন তৈরি করা
var engine = new BABYLON.Engine(canvas, true);
// Scene তৈরি করা
var scene = new BABYLON.Scene(engine);
// ক্যামেরা তৈরি করা
var camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);
// আলোর উৎস তৈরি করা
var light = new BABYLON.HemisphericLight("light1", BABYLON.Vector3.Up(), scene);
// একটি বক্স তৈরি করা
var box = BABYLON.MeshBuilder.CreateBox("box", {size: 2}, scene);
// Animation তৈরি করা (বক্সের পজিশন পরিবর্তন)
var animation = new BABYLON.Animation("moveBox", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
// Keyframe তৈরি করা (বক্সের x পজিশন পরিবর্তন)
var keyFrames = [];
keyFrames.push({ frame: 0, value: 0 });
keyFrames.push({ frame: 100, value: 5 });
keyFrames.push({ frame: 200, value: 0 });
// Keyframe গুলো Animation এ যোগ করা
animation.setKeys(keyFrames);
// Animation বক্সে যোগ করা
box.animations.push(animation);
// রেন্ডার লুপে Animation চালানো
engine.runRenderLoop(function () {
scene.render();
});
// ব্রাউজারের আকার পরিবর্তন হলে আউটপুট রিসাইজ করা
window.addEventListener("resize", function () {
engine.resize();
});
// Animation চালানো
scene.beginAnimation(box, 0, 200, true);
</script>
</body>
</html>
কোডের ব্যাখ্যা:
- Scene, Camera, Light, and Box: প্রথমেই একটি 3D বক্স তৈরি করেছি, এবং সেটি দৃশ্যে যোগ করেছি।
- Animation তৈরি করা:
BABYLON.Animationক্লাসের মাধ্যমে একটি এনিমেশন তৈরি করা হয়েছে।"position.x"এ এনিমেশনটি প্রয়োগ করা হয়েছে, যা বক্সের x-axis পজিশন পরিবর্তন করবে।- এনিমেশনের frame rate
30নির্ধারণ করা হয়েছে এবং loop mode হিসেবেANIMATIONLOOPMODE_CYCLEব্যবহার করা হয়েছে (এটি এনিমেশনকে লুপ করে পুনরায় চালাবে)।
- Keyframes তৈরি করা:
- প্রথমে বক্সের x পজিশন
0তে সেট করা হয়েছে (frame 0)। - পরবর্তীতে, frame 100 তে x পজিশন
5তে গিয়ে স্থির হয়েছে। - তারপর, frame 200 তে আবার x পজিশন
0তে ফিরে আসবে।
- প্রথমে বক্সের x পজিশন
- Animation বক্সে যোগ করা:
box.animations.push(animation)দিয়ে এই এনিমেশনটি বক্সে যোগ করা হয়েছে।
- beginAnimation:
scene.beginAnimation(box, 0, 200, true)এই ফাংশন দিয়ে এনিমেশন শুরু করা হয়েছে, যা বক্সের x পজিশন পরিবর্তন করবে 0 থেকে 5 এবং আবার 0 তে ফিরে আসবে।
৩. Animation এর বিভিন্ন ধরনের প্রপার্টি
BabylonJS এ বিভিন্ন ধরনের এনিমেশন প্রপার্টি তৈরি করা যেতে পারে:
- Position: 3D অবজেক্টের অবস্থান পরিবর্তন (x, y, z)।
- Rotation: 3D অবজেক্টের রোটেশন পরিবর্তন (x, y, z এভ্যালু)।
- Scaling: অবজেক্টের আকার পরিবর্তন (x, y, z আকারে)।
- Material: অবজেক্টের রঙ, টেক্সচার ইত্যাদি পরিবর্তন।
- Camera: ক্যামেরার পজিশন বা রোটেশন পরিবর্তন।
৪. Animation Types এবং Looping Mode
BabylonJS এ Animation এর কিছু গুরুত্বপূর্ণ টাইপ এবং লুপিং মোড রয়েছে:
- ANIMATIONTYPE_FLOAT: এটি সাধারণত নম্বর (যেমন পজিশন বা স্কেল) এনিমেট করতে ব্যবহৃত হয়।
- ANIMATIONTYPE_VECTOR3: এটি 3D ভেক্টর (যেমন পজিশন বা স্কেল) এনিমেট করতে ব্যবহৃত হয়।
- ANIMATIONTYPE_COLOR3: এটি RGB রঙের জন্য এনিমেশন তৈরি করতে ব্যবহৃত হয়।
Loop Modes:
- ANIMATIONLOOPMODE_CONSTANT: এনিমেশন একটি নির্দিষ্ট মানে পৌঁছানোর পর বন্ধ হয়ে যাবে।
- ANIMATIONLOOPMODE_CYCLE: এনিমেশন সাইকেল অনুযায়ী চলতে থাকবে।
- ANIMATIONLOOPMODE_RELATIVE: এনিমেশন শুরু হলে তা পূর্ববর্তী স্টেটে ফিরে যাবে এবং নতুন স্টেটের সাথে যুক্ত হবে।
সারাংশ
BabylonJS এ Animation একটি গুরুত্বপূর্ণ উপাদান যা অবজেক্টের বিভিন্ন বৈশিষ্ট্য সময়ের সাথে পরিবর্তন করার মাধ্যমে 3D দৃশ্যে গতিশীলতা এবং ইন্টারঅ্যাকশন যোগ করে। এনিমেশন তৈরির জন্য Animation ক্লাস, Keyframes, এবং Looping Modes ব্যবহার করা হয়। আপনি অবজেক্টের Position, Rotation, Scaling এবং Material এনিমেট করে 3D দৃশ্যকে আরো বাস্তবসম্মত ও আকর্ষণীয় করতে পারেন।
Read more
